<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:cms="http://thymeleafexamples">
<head th:include="include/head"><!--引用CSS文件-->
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!--    <h1>活动详情页</h1>-->
<!--    <text th:text="${activity.activityName}"></text>-->
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>活动详情</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">首页</a></li>
                            <li class="breadcrumb-item active">目录管理</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <section class="content">
            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">活动详情</h3>
                </div>
                    <input type="hidden"  id="majorId" name="majorId" th:value="${activity.activityId}" />
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="activityName" class="col-sm-2 col-form-label">活动名称</label>
                            <div class="col-sm-10">
                                <text name="majorNam"  required id="activityName" placeholder="活动名称" th:text="${activity.activityName}"></text>
<!--                                <input type="text" class="form-control" name="majorNam"  required id="activityName" placeholder="活动名称" aria-required="true" th:value="${activity.activityName}">-->
<!--                                <label class="help-block m-b-none" for="activityName" id="name-error"><i class="far fa-bell"></i>必填项</label>-->
                            </div>
                        </div>

<!--                        <div class="form-group row">-->
<!--                            <label for="userName" class="col-sm-2 col-form-label">活动发起人</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <text th:text="${activity.userName}"></text>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <hr>-->
                        <div class="form-group row" >
                            <label for="activityPic" class="col-sm-2 col-form-label">活动图片</label>
                            <div class="col-sm-10">
                                <img th:src="${activity.activityPic}"  style="width: 400px;height: 300px"/>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group row" style="margin-bottom: 0px">
                            <label for="activityStart" class="col-sm-2 col-form-label">活动开始时间</label>
                            <div class="col-sm-10">
                                <text >
                                    <cms:time timeInt="${activity.activityStart}"></cms:time>
                                </text>
<!--                                <input type="text" class="form-control" name="activityStartTime"  required-->
<!--                                       id="activityStartTime" placeholder="活动开始时间" aria-required="true"-->
<!--                                       th:value="${activity.activityStart}">-->
<!--                                <label class="help-block m-b-none" for="majorName" id="name-error"><i class="far fa-bell"></i>必填项</label>-->
                            </div>
                        </div>
<!--                        <hr>-->
                        <div class="form-group row">
                            <label for="activityEnd" class="col-sm-2 col-form-label">活动结束时间</label>
                            <div class="col-sm-10">
                                <text >
                                    <cms:time timeInt="${activity.activityEnd}"></cms:time>
                                </text>
<!--                                <text th:text="${activity.activityEnd}"></text>-->
<!--                                <input type="text" class="form-control" name="activityEndTime"  required-->
<!--                                       id="activityEndTime" placeholder="活动结束时间" aria-required="true"-->
<!--                                       th:value="${activity.activityEnd}">-->
<!--                                <label class="help-block m-b-none" for="majorName" id="name-error"><i class="far fa-bell"></i>必填项</label>-->
                            </div>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <label for="activityDesc" class="col-sm-2 col-form-label">活动详情</label>
                            <div class="col-sm-10">
                                <text th:text="${activity.cateName}"></text>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <label for="activityDesc" class="col-sm-2 col-form-label">人均消费</label>
                            <div class="col-sm-10">
                                <text th:if="${activity.averagePeople==0}" th:text="'免费'">
                                </text>
                                <text th:if="${activity.averagePeople!=0}"   th:text="${activity.averagePeople}">
                                </text>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <label for="activityDesc" class="col-sm-2 col-form-label">活动详情</label>
                            <div class="col-sm-10">
                                <text th:text="${activity.activityDesc}"></text>
                            </div>
                        </div>
                        <hr>

                        <div class="form-group row">
                            <label for="activityState" class="col-sm-2 col-form-label">已报名([[${activity.totalPeople}]])</label>
                            <div class="col-sm-10">
                                <!--                           新增 th:attr="id='id'+${bean.commentId}"-->
                                <div class="post" th:each="bean : ${activityUser}" th:attr="id='id'+${bean.activityId}" >
                                        <img class="img-circle img-bordered-sm" th:src="${bean.userPic}" style="width: 40px;height: 40px" >
                                        <span class="username">
                                                  <a href="#"  th:text="${bean.userName}"></a>
                                              </span>
<!--                                                    ，-->
<!--                                             <span class="username">-->
<!--                                                  <a href="#"  th:text="${bean.userMobile}"></a>-->
<!--                                              </span>-->


                                </div>
                            </div>
                        </div>
        <hr>
                        <div class="form-group row">
                            <label for="activityState" class="col-sm-2 col-form-label">活动状态</label>
                            <div class="col-sm-10">
                                <text th:if="${activity.activityState}==0" >未开始</text>
                                <text th:if="${activity.activityState}==1" style="color: #dc6502">报名中</text>
                                <text th:if="${activity.activityState}==2" style="color: #00b44e">进行中</text>
                                <text th:if="${activity.activityState}==3" style="color: red">已结束</text>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-info" th:attr="data-pid=|${activity.activityId}" id="back">返回</button>
<!--                        <button type="submit" class="btn btn-info">返回</button>-->

                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
<!-- ./wrapper -->
<div th:include="include/foot"></div>
<script>
    $.validator.setDefaults({
        highlight : function(a) {
            $(a).removeClass("is-valid").addClass(
                "is-invalid");
        },
        success : function(a) {
            $(a).prev().removeClass("is-invalid").addClass(
                "is-valid");
            $(a).html('<i class="fas fa-check"></i>验证成功');
        },
        errorClass:"help-block m-b-none",
// 		validClass:"help-block m-b-none",
        errorPlacement:function(a,b){
            if(b.is(":radio")||b.is(":checkbox")){
                a.appendTo(b.parent().parent().parent())
            }else{
                a.appendTo(b.parent())
            }},
        submitHandler:function(form){loadPage();form.submit();}
    });

    $.validator.addMethod("checkCode", function(value, element) {
        console.log(value)
        if (value == '') {
            return true;
        }
        let result = false;
        let id = $("#majorId").val();
        $.ajax({
            url : 'checkCode?id=' + id + '&code=' + value+ '&type=' + 1,
            async : false,
            success : function(e) {
                result = e.res;
            },error:function(e){
                layer.msg(e.responseText, {icon: 5});
            }
        });
        return result;
    }, "");
    $.validator.addMethod("checkName", function(value, element) {
        console.log(value)
        if (value == '') {
            return true;
        }
        let result = false;
        let id = $("#majorId").val();
        $.ajax({
            url : 'checkCode?id=' + id + '&code=' + value+ '&type=' + 2,
            async : false,
            success : function(e) {
                result = e.res;
            },error:function(e){
                layer.msg(e.responseText, {icon: 5});
            }
        });
        return result;
    }, "");
    $().ready(function() {
        $("#back").click(function() {
            loadPage();
            let pId=$(this).data('pid');
            console.log(pId);
            // location.href = 'majorList?pId='+pId;
            location.href = 'activityList';
        });
        $("#form").validate({
            rules : {
                name : "required",
                descritpion : "required",
                url:"required",
                isShow:{
                    required:true,
                    minlength:1
                },
                majorName : {
                    required:true,
                    checkName : true
                },
                back5 : {
                    required:true,
                    checkCode : true,
                    maxlength:20
                },
            },
            messages : {
                name : '<i class="far fa-times-circle"></i>请输入目录名称',
                descritpion : '<i class="far fa-times-circle"></i>请输入目录描述',
                url :'<i class="far fa-times-circle"></i>请输入目录链接',
                isShow:'<i class="far fa-times-circle"></i>请选择是否显示',
                majorName : {
                    required : '<i class="far fa-times-circle"></i>请输入专业名称',
                    checkName : '<i class="far fa-times-circle"></i>专业已存在'
                },
                back5 : {
                    required : '<i class="far fa-times-circle"></i>请输入编码',
                    checkCode : '<i class="far fa-times-circle"></i>编码已经使用',
                    maxlength : '代码最大长度为{0}'
                },
            }
        });
    });
    loadPage=function(){
        window.parent.loadPage();
    }
</script>
</body>
</html>